<template>
	<view class="page" style="padding-top: 1px;">
		<view class="head" v-if="pageList.length!=0">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list" v-if="pageList.length!=0">
				<view class="list" v-for="(item,index) in pageList" :key="index">
					<view class="check" @click="checkboxChange(item.id)">
						<radio :checked="item.checked" value="" color="#f20" style="transform: scale(.7);" />
						<!-- <text class="iconfont icon-check"></text> -->
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.name}}</text>
							</view>
							<view class="attribute">
								<view class="attr">
									<text>{{item.spec}}</text>
								</view>
							</view>
							<view class="price-num">
								<view class="price">
									<!-- <text class="min" v-if="item.area_type!=3">￥</text> -->
									<text class="max">{{item.price_selling}}</text>
									<!-- <text class="min" v-if="item.area_type==3">积分</text> -->
								</view>
								<view class="num">
									<uni-number-box @change="changeValue" :min="1" v-model="item.count" />
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 购物车失效商品列表 -->
			<view class="lose-efficacy-list" v-if="status_list.length!=0">
				<view class="lose-efficacy-title">
					<view class="title">
						<text>失效商品{{status_list.length}}件</text>
					</view>
					<view class="empty" @click="clearCart">
						<text>清空失效商品</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in status_list" :key="index">
					<view class="tag">
						<text>失效</text>
					</view>
					<view class="goods" @click="onSkip('goods')">
						<view class="pictrue">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.name}}</text>
							</view>
							<view class="explain">
								<text>商品已不能购买，请联系客服进行沟通</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-box" v-if='pageList.length==0'>
				<image src="/static/ic_nodata.png" mode=""></image>
				<view class="uni-flex uni-flex-align uni-flex-center uni-text-gray" style="margin: 30rpx auto 50rpx;">
					购物车空空如也~</view>
				<view class="gouwu" @click="go_home">去逛逛~</view>
			</view>
			<!-- 结算 -->
			<view class="close-account" v-if="pageList.length!=0">
				<view class="check-total">
					<view class="check" @click.stop="checkboxAllChange" v-if="!isEdit">
						<radio :checked="isAllSelect" value="" color="#f20" style="transform: scale(.7);" />
						<text class="all">全选</text>
					</view>
					<view class="total" v-if="!isEdit">
						<text>合计：</text>
						<text class="price">{{selectCountPrice}}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit">
						<text @click="seubmite">去结算</text>
					</view>
					<view class="btn-del" v-else>
						<text class="del" @click="subDel">删除</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 150rpx;"></view>
		</mescroll-body>
		<view class="flex flex-align flex-center zhezhao" v-if="isloading">
			<loading></loading>
		</view>
		<tui-login :show="show"  @close="guanbi"></tui-login>
		<!-- tabbar -->
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import loading from "@/components/loading/loading.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			loading
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				isEdit: false,
				pageList: [],
				page: 1,
				isAllSelect: false,
				selectValue: [],
				selectCountPrice: 0,
				check_id: [],
				status_list:[],
				show:false,
				isLogin:false,
				isloading:false,
				timer:null
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		onShow() {
			let that = this
			that.isLogin = this.tui.isLogin()
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$on('isShow', function(data) {
				that.show = true
			});
			uni.$on('isLogin', function(data) {
				that.page = 1
				that.pageList = []
				that.isAllSelect = false
				that.selectCountPrice = 0
				that.getList()
				that.isLogin = this.tui.isLogin()
			});
			if(that.isLogin){
				that.page = 1
				that.pageList = []
				that.isAllSelect = false
				that.selectCountPrice = 0
				that.getList()
			}
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getList()
		},
		// #ifdef MP
		onShareAppMessage() {
			return {
				title: '分享海报',
				path: '/pages/home/home?inviter_code=' + uni.getStorageSync('inviter_code'),
			};
		},
		// #endif
		onUnload() {
			let that = this
			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			uni.$off('isShow');
			uni.$off('isLogin');
			that.isloading = false
			clearInterval(that.timer)
		},
		onHide() {
			let that = this
			that.isloading = false
			clearInterval(that.timer)
		},
		methods: {
			go_home() {
				let that = this
				if(this.tui.isLogin()){
					uni.switchTab({
						url: '/pages/classify/classify'
					})
				}else{
					// this.tui.wetLogin()
					setTimeout(function(){
						window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+that.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
					},1000)
				}
				
			},
			getStatus(){
				let that = this
				that.tui.request("api.auth.order/orderStatus", "POST", {order_no:that.order_no}, false, false, true).then((res) => {
					if (res.code == 1) {
						if(res.data.status==2){
							clearInterval(that.timer)
							that.timer =setInterval(()=>{
								that.getStatus()
							},1000)
						}else if(res.data.status==1){
							that.tui.href('/pages/ConfirmOrder/ConfirmOrder?order_no='+that.order_no)
						}
					}
				}).catch((res) => {
				
				})
			},
			guanbi(){
				this.show = false
			},
			getList() {
				let that = this
				that.tui.request("api.auth.order/cartList", "POST", {
					page: that.page
				}, false, false, true).then((res) => {
					if (res.code == 1) {
						console.log(res.data.list)
						res.data.list.map((item, index) => {
							item.checked = false
						})
						that.pageList = that.pageList.concat(res.data.list)
						that.status_list = res.data.status_list
					}
				}).catch((res) => {})
			},
			clearCart(){
				let that = this
				that.tui.request("api.auth.order/cartEfficacy", "POST", {page: that.page}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if (res.code == 1) {
						that.page = 1
						that.pageList = []
						that.isAllSelect = false
						that.selectCountPrice = 0
						that.getList()
					}
				}).catch((res) => {})
			},
			seubmite() {
				let that = this
				let data = []
				that.pageList.map((item, index) => {
					if (item.checked) {
						console.log(item)
						data = data + item.goods_code + "@" + item.count + "||"
					}
				})
				data = data.slice(0, -2)
				console.log(data)
				that.tui.request('api.auth.order/add', "post", {
					items: data
				}, false, true, false).then((res) => {
					console.log(res)
					if (res.code == 1) {
						that.order_no = res.data.order_no
						that.isloading = true
						that.getStatus()
						// setTimeout(function() {
						// 	uni.navigateTo({
						// 		url: '/pages/ConfirmOrder/ConfirmOrder?order_no=' + res.data.order_no
						// 	})
						// }, 500)
					}else{
						that.tui.toast(res.info)
					}

				}).catch((res) => {
					console.log(res)
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			},
			changeValue(e) {
				let that = this
				console.log('返回数值：', e);
				that.switchSelect();
			},
			checkboxChange(e) {
				console.log(e)
				let that = this;
				let value = [];
				let valid = that.pageList;
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				if (that.check_id.length == 0) {
					that.check_id.push(e)
				} else {
					if (that.check_id.indexOf(e) == -1) {
						that.check_id.push(e)
					} else {
						console.log(e)
						that.check_id.map((item, index) => {
							if (item == e) {
								that.check_id.splice(index, 1)
							}
						})
					}
				}
				console.log(that.check_id)
				let newValid = valid.map(item => {
					if (that.inArray(item.id, that.check_id)) {
						item.checked = true;
						arr1.push(item);
					} else {
						item.checked = false;
						arr2.push(item);
					}
					return item;
				});

				that.$set(that.pageList, 'valid', newValid);

				that.isAllSelect = newValid.length === arr1.length
				that.selectValue = that.check_id;
				that.switchSelect();
			},
			checkboxAllChange() {
				this.isAllSelect = !this.isAllSelect
				if (this.isAllSelect) {
					this.setAllSelectValue(1)
				} else {
					this.setAllSelectValue(0)
				}
			},
			setAllSelectValue: function(status) {
				console.log(status)
				let that = this;
				let selectValue = [];
				let valid = that.pageList
				if (valid.length > 0) {
					let newValid = valid.map(item => {
						if (status) {
							item.checked = true;
							selectValue.push(item.id);
							that.isAllSelect = true;
						} else {
							item.checked = false;
							that.isAllSelect = false;
						}
						return item;
					});

					that.$set(that.pageList, 'valid', newValid);
					console.log(selectValue)
					that.selectValue = selectValue;
					that.switchSelect();
				}
			},
			switchSelect: function() {
				let that = this;
				let validList = that.pageList;
				console.log(validList)
				let selectValue = that.selectValue;
				let selectCountPrice = 0.00;
				if (selectValue.length < 1) {
					that.selectCountPrice = selectCountPrice;
				} else {
					for (let index in validList) {
						if (that.inArray(validList[index].id, selectValue)) {
							selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index]
								.count, validList[index].price_selling))
						}
					}
					that.selectCountPrice = selectCountPrice;
				}
			},
			inArray: function(search, array) {
				for (let i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},
			subDel() {
				// console.log(e);
				let that = this
				that.tui.request("api.auth.order/cartDet", "post", {
					cart_id: that.selectValue
				}, false, true, false).then((res) => {
					that.tui.toast(res.info)
					if (res.code == 1) {
						setTimeout(function() {
							that.selectCountPrice = 0
							that.isAllSelect = false;
							that.isEdit = false
							that.page = 1
							that.pageList = []
							that.getList()
						}, 1000)
					}

				}).catch((res) => {})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		//position: absolute;
		//width: 100%;
		//height: 100%;
		//overflow-x: hidden;
		//overflow-y: auto;
		background-color: rgb(247, 247, 247);
	}
.zhezhao{background: rgba(0, 0, 0, .3);
		position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 11111;
	}
	.head {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		/* #ifdef APP-PLUS */
		height: calc(100rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		/* #endif */
		background-color: #FFFFFF;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #212121;
		}

		.edit {
			position: absolute;
			right: 20rpx;
			top: 50%;
			/* #ifdef APP-PLUS */
			top: calc(50rpx + var(--status-bar-height));
			/* #endif */
			transform: translate(0, -50%);

			text {
				color: #212121;
				font-size: 26rpx;
			}
		}
	}

	/* 购物车列表 */
	.cart-list {
		width: 100%;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		margin-top: 100rpx;
		/* #ifdef APP-PLUS */
		margin-top: calc(100rpx + var(--status-bar-height));

		/* #endif */
		.list {
			display: flex;
			padding: 0 3%;
			height: 240rpx;
			margin-bottom: 20rpx;

			.check {
				display: flex;
				align-items: center;
				width: 10%;
				height: 100%;

				text {
					font-size: 36rpx;
					color: #333333;
				}

				.icon-checked {
					color: $base;
					// box-shadow: 0 0 10rpx $base;
				}
			}

			.goods {
				display: flex;
				align-items: center;
				width: 90%;
				height: 100%;
				background-color: #FFFFFF;
				box-shadow: 0 0 20rpx #f6f6f6;
				border-radius: 10rpx;

				.thumb {
					display: flex;
					// align-items: center;
					justify-content: center;
					width: 30%;
					height: 100%;
					align-items: center;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}

				.item {
					padding: 10rpx 0;
					width: 70%;
					height: 100%;

					.title {
						display: flex;
						align-items: center;
						width: 100%;
						height: 80rpx;

						text {
							font-size: 26rpx;
							color: #212121;
						}
					}

					.attribute {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.attr {
							display: flex;
							align-items: center;
							padding: 0 20rpx;
							height: 40rpx;
							background-color: #f6f6f6;
							border-radius: 10rpx;

							text {
								font-size: 24rpx;
								color: #333333;
							}

							.more {
								display: flex;
								width: 10rpx;
								height: 10rpx;
								border-left: 2rpx solid #333333;
								border-bottom: 2rpx solid #333333;
								transform: rotate(-45deg);
								margin-left: 10rpx;
							}
						}
					}

					.price-num {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						padding-right: 10rpx;

						.price {
							display: flex;

							.min {
								color: $base;
								font-size: 24rpx;
							}

							.max {
								font-size: 28rpx;
								color: $base;
								font-weight: bold;
							}
						}

						.num {
							display: flex;
							height: 40rpx;

							.add {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 40rpx;
								height: 40rpx;
								background-color: #FFFFFF;

								text {
									color: #212121;
									font-size: 24rpx;
								}
							}

							.number {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 80rpx;
								height: 40rpx;
								background-color: #f6f6f6;
								border-radius: 8rpx;

								text {
									font-size: 24rpx;
									color: #212121;
								}
							}
						}
					}
				}
			}
		}
	}

	.gouwu {
		background: $base;
		color: #fff;
		width: 200rpx;
		margin: 0 auto;
		line-height: 70rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 111;
	}

	/* 结算 */
	.close-account {
		position: fixed;
		left: 0;
		bottom: 100rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 2rpx solid #f6f6f6;

		.check-total {
			display: flex;
			align-items: center;
			width: 50%;
			height: 100%;

			.check {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40%;
				height: 100%;

				text {
					font-size: 36rpx;
					color: #333333;
				}

				.icon-checked {
					color: $base;
					// box-shadow: 0 0 10rpx $base;
				}

				.all {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.total {
				display: flex;
				align-items: center;
				width: 60%;
				height: 100%;

				text {
					font-size: 24rpx;
					color: #333333;
				}

				.price {
					font-weight: bold;
					color: $base;
				}
			}
		}

		.account {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 46%;
			padding-right: 4%;

			.btn-calculate {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				background-color: $base;
				border-radius: 60rpx;

				text {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}

			.btn-del {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.attention {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 60rpx;
					border: 2rpx solid #EEEEEE;
					border-radius: 60rpx;
					color: #333333;
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				.del {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 60rpx;
					background-color: $base;
					border-radius: 60rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
		}
	}
	/* 购物车失效商品列表 */
	.lose-efficacy-list{
	  width: 100%;
	  background-color: #FFFFFF;
	  padding: 0 30rpx;
	  margin-top: 30rpx;
	  border-radius: 10rpx;
	  overflow: hidden;
	  .lose-efficacy-title{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	    height: 80rpx;
	    .title{
	      display: flex;
	      align-items: center;
	      height: 100%;
	      text{
	        font-size: 28rpx;
	        color: #222222;
	      }
	    }
	    .empty{
	      display: flex;
	      align-items: center;
	      height: 100%;
	      text{
	        font-size: 26rpx;
	        color: $base;
	      }
	    }
	  }
	  .list{
	    display: flex;
	    align-items: center;
	    width: 100%;
	    height: 240rpx;
	    border-bottom: 1px solid #f6f6f6;
	    .tag{
	      display: flex;
	      align-items: center;
	      width: 10%;
	      height: 100%;
	      text{
	        padding: 4rpx 10rpx;
	        font-size: 24rpx;
	        color: #FFFFFF;
	        background-color: rgba(0,0,0,0.3);
	        border-radius: 20rpx;
	      }
	    }
	    .goods{
	      display: flex;
	      align-items: center;
	      width: 90%;
	      height: 100%;
	      background-color: #FFFFFF;
	      border-radius: 10rpx;
	      .pictrue{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 30%;
	        height: 100%;
	        image{
	          width: 160rpx;
	          height: 160rpx;
	          border-radius: 10rpx;
	        }
	      }
	      .item{
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;
	        width: 70%;
	        height: 160rpx;
	        .title{
	          width: 100%;
	          text{
	            font-size: 28rpx;
	            color: #999999;
	          }
	        }
	        .explain{
	          display: flex;
	          align-items: center;
	          text{
	            font-size: 24rpx;
	            color: #222222;
	          }
	        }
	      }
	    }
	  }
	}
</style>